<template>
      <div class="main">
        <div class="content">
          <div class="list" v-for='(item,index) in tableBody' :key='index' @click='enter(item.id)'>
            <div class="content-list">
              <h2>{{item.title}}</h2>
              <div class="box">
                {{item.content}}
              </div>
              <p class="info">
                <span class="author">{{item.author}}</span>
                <span class="type">
                  <Icon type="ios-attach" />
                  {{item.type}}
                </span>
              </p>
            </div>
            <div class="img" v-if='item.image'>
              <img src="" alt="">
            </div>
          </div>
        </div>
      </div>
</template>
<script>
export default {
  name: 'home',
  data () {
    return {
      type: [
        'html',
        'css',
        'javaScript',
        'vue',
        'react'
      ]
    }
  },
  props: [
    'tableBody'
  ],
  methods: {
    enter (id) {
      this.$router.push(`/article/${id}`)
    }
  }
}
</script>

<style scoped lang='less'>
  @import url('./articleList');
</style>
